import React,{useEffect,useRef,useState} from 'react';
import {useLocation,useNavigate} from 'react-router-dom';
import {Scrollbars} from 'react-custom-scrollbars';
import {Button,Card,Cascader,Form,Input,InputNumber,message} from 'antd';
import {ArrowLeftOutlined} from '@ant-design/icons';

import UploadPictures from './upload-pictures';
import RichTextEditor from './rich-text-editor';
import {reqAddOrUpdateProduct,reqGetCategoryList} from '../../api';
import LinkButton from '../../components/LinkButton';

/**
 *商品管理修改页
 */
function ProductUpdate(){
  // 获取product数据，回显
  const location = useLocation();
  const {product} = location.state;
  // navigate跳转路由
  const navigate = useNavigate();
  // 获取上传组件对象 UploadPictures
  const refImgs = useRef();
  // 获取富文本对象 RichTextEditor
  const refDetail = useRef();
  // 存储一级分类
  const [options,setOptions] = useState([]);

  /**
   * 生成一级菜单列表
   * @param categoryList 一级菜单列表
   */
  async function initOptions(categoryList){
    // 根据categoryList生成categoryList数组
    const options = categoryList.map(function(category){
      return ({
        value: category._id,
        label: category.name,
        // 不是叶子
        isLeaf: false
      })
    });

    const {pCategoryId} = product;
    if(pCategoryId !== '0'){
      // 获取对应的二级分类列表
      const subCategorys = await reqGetCategory(pCategoryId);
      // 生成二级下拉列表的options
      const childOptions = subCategorys.map(category =>({
        value: category._id,
        label: category.name,
        isLeaf: true
      }))

      // 找到当前商品对应的一级option对象
      const targetOption = options.find(option => option.value === pCategoryId);

      // 关联对应的一级option上
      targetOption.children = childOptions;
    }

    setOptions(options);
  }

  /**
   * 获取分类列表 一级or二级
   * @param parentId 分类父类id
   * @returns {Promise<*>}
   */
  async function reqGetCategory(parentId){
    // 调用获取分类列表的方法
    const response = await reqGetCategoryList(parentId);
    // 判断获取数据是否成功
    if(response.status === 0){
      // 判断是几级分类
      if(parentId === "0"){
        //一级分类列表，成功后调用initOptions方法
        await initOptions(response.data);
      }else{
        // 二级分类列表
        return response.data;
      }
    }else{
      // 获取数据失败！
      message.error("获取数据失败！");
    }
  }

  /**
   * 页面刷新时调用
   */
  useEffect(function(){
    // 调用获取一级分类列表
    reqGetCategory("0").then();
  },[]);

  /**
   * 获取下级列表
   * @param selectedOptions 当前option对象数组
   * @returns {Promise<void>}
   */
  async function loadData(selectedOptions){
    // 获取当前option选择对象
    const targetOption = selectedOptions[0];
    // 开启loading
    targetOption.loading = true;
    /*
    获取二级列表数据
     */
    const subCategoryList = await reqGetCategory(targetOption.value);
    // 关闭loading
    targetOption.loading = false;
    // 如果返回二级列表有数据，则给当前option添加children
    if(subCategoryList && subCategoryList.length>0){
      //给当前选择的option对象创建二级列表
      targetOption.children = subCategoryList.map(function(category){
        return ({
          value: category._id,
          label: category.name,
          isLeaf: true
        })
      });
    }else{
      targetOption.isLeaf = true;
    }

    // 重新赋值options对象
    setOptions([...options]);
  }

  const title = (
    <span>
      <LinkButton onClick={function(){
        navigate('/product');
      }}>
        <ArrowLeftOutlined />
      </LinkButton>
      <span>修改商品</span>
    </span>
  );

  const layout = {
    labelCol: {span: 2},
    wrapperCol: {span: 8}
  };

  /**
   * 提交from表单方法
   * @param values
   */
  async function onFinish(values){
    //把从子上传组件收到的图片名称（路径），保存到value中
    values.imgs = refImgs.current.getImgs().map(function(img){
      return img.name;
    });
    //把从子富文本组件收到的detail，保存到value中
    values.detail = refDetail.current.getDetail();
    // 1. 收集数据, 并封装成product对象
    const {name,desc,price,categoryIds,imgs,detail} = values;
    let pCategoryId, categoryId;
    if (categoryIds.length === 1) {
      pCategoryId = '0';
      categoryId = categoryIds[0];
    } else {
      pCategoryId = categoryIds[0];
      categoryId = categoryIds[1];
    }
    const productPriam = {name,desc,price,imgs,detail,pCategoryId,categoryId}
    productPriam._id = product._id;
    // 2. 调用接口请求函数去添加/更新
    const result = await reqAddOrUpdateProduct(productPriam);
    // 3. 根据结果提示
    if (result.status === 0) {
      message.success("修改商品成功!");
      navigate('/product');
    } else {
      message.error("修改商品失败!");
    }
  }

  const {pCategoryId,categoryId,imgs,detail} = product;
  // 用来接收级联分类ID的数组
  const categoryIds = [];
  // 商品是一个一级分类的商品
  if(pCategoryId === '0') {
    categoryIds.push(categoryId);
  } else {
    // 商品是一个二级分类的商品
    categoryIds.push(pCategoryId);
    categoryIds.push(categoryId);
  }

  return (
    <Scrollbars>
      <Card title={title}>
        <Form
          {...layout}
          onFinish={onFinish}
          //根据name展示默认值
          initialValues={{
            name: product.name,
            desc: product.desc,
            price: product.price,
            categoryIds: categoryIds
          }}
        >
          <Form.Item
            label="商品名称"
            name="name"
            rules={[
              {required: true,message: "商品名称不能为空!"},
            ]}
          >
            <Input placeholder="请输入商品名称"/>
          </Form.Item>
          <Form.Item
            name="desc"
            label="商品描述"
          >
            <Input.TextArea autoSize/>
          </Form.Item>
          <Form.Item
            name="price"
            label="商品价格"
            rules={[
              {required: true,message: "商品价格不能为空!"},
            ]}
          >
            <InputNumber addonAfter="元" min={0} max={99999999999}/>
          </Form.Item>
          <Form.Item
            name="categoryIds"
            label="商品分类"
          >
            <Cascader
              options={options}
              loadData={loadData}
              placeholder="商品分类"/>
          </Form.Item>
          <Form.Item
            name="imgs"
            label="商品图片"
          >
            <UploadPictures ref={refImgs} imgs={imgs}/>
          </Form.Item>
          <Form.Item
            name="detail"
            label="商品详情"
            labelCol={{span: 2}}
            wrapperCol={{span: 20}}
          >
            <RichTextEditor ref={refDetail} detail={detail}/>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              提 交
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </Scrollbars>
  );
}

export default ProductUpdate;